<template>
	<echartBox title="工商业统计" width="651px" height="427px">
		<div class="echart-show" ref="chart"></div>
	</echartBox>
</template>

<script>
import * as echarts from "echarts";
import echartBox from "../echart-box.vue";

export default {
	name: "Page3ItemBox12",
	components: {
		echartBox,
	},
	props: {
		chartData: {
			type: Object,
			required: true,
			default: () => ({
				categories: [],
				series1: { name: "", data: [] },
				series2: { name: "", data: [] }
			})
		}
	},
	methods: {
		// 初始化图表
		initChart() {
			this.build3DBarChart();
		},
		// 构建双系列3D柱状图
		build3DBarChart() {
			let chartContainer = this.$refs.chart;
			if (!chartContainer || chartContainer.clientWidth === 0 || chartContainer.clientHeight === 0) {
				console.warn('Chart container not ready, skipping chart initialization');
				return;
			}
			let myChart = echarts.init(chartContainer);

			const offsetX = 8;
			const offsetY = 4.8;

			// 绘制左侧面
			const CubeLeft = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0,
				},
				buildPath: function (ctx, shape) {
					const xAxisPoint = shape.xAxisPoint;
					const c1 = [shape.x, xAxisPoint[1]]; // 底部
					const c2 = [shape.x - offsetX, xAxisPoint[1] - offsetY]; // 底部左后
					const c3 = [shape.x - offsetX, shape.y - offsetY]; // 顶部左后
					const c4 = [shape.x, shape.y]; // 顶部
					ctx.moveTo(c1[0], c1[1])
						.lineTo(c2[0], c2[1])
						.lineTo(c3[0], c3[1])
						.lineTo(c4[0], c4[1])
						.closePath();
				},
			});

			// 绘制右侧面
			const CubeRight = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0,
				},
				buildPath: function (ctx, shape) {
					const xAxisPoint = shape.xAxisPoint;
					const c1 = [shape.x, xAxisPoint[1]]; // 底部
					const c2 = [shape.x + offsetX, xAxisPoint[1] - offsetY]; // 底部右后
					const c3 = [shape.x + offsetX, shape.y - offsetY]; // 顶部右后
					const c4 = [shape.x, shape.y]; // 顶部
					ctx.moveTo(c1[0], c1[1])
						.lineTo(c2[0], c2[1])
						.lineTo(c3[0], c3[1])
						.lineTo(c4[0], c4[1])
						.closePath();
				},
			});
			
			// 绘制顶面
			const CubeTop = echarts.graphic.extendShape({
				shape: {
					x: 0,
					y: 0,
				},
				buildPath: function (ctx, shape) {
					const c1 = [shape.x, shape.y];
					const c2 = [shape.x + offsetX, shape.y - offsetY];
					const c3 = [shape.x, shape.y - offsetY * 2];
					const c4 = [shape.x - offsetX, shape.y - offsetY];
					ctx.moveTo(c1[0], c1[1])
						?.lineTo(c2[0], c2[1])
						.lineTo(c3[0], c3[1])
						.lineTo(c4[0], c4[1])
						.closePath();
				},
			});
			
			// 注册三个面图形
			echarts.graphic.registerShape("CubeLeft", CubeLeft);
			echarts.graphic.registerShape("CubeRight", CubeRight);
			echarts.graphic.registerShape("CubeTop", CubeTop);

			const option = {
				backgroundColor: "transparent",
				legend: {
					show: true,
					data: [
						{
							name: this.chartData.series1.name,
							icon: 'rect',
							itemStyle: {
								color: '#08c4c9' // 对应组件3的颜色
							}
						},
						{
							name: this.chartData.series2.name,
							icon: 'rect',
							itemStyle: {
								color: '#09d0f7' // 对应组件6的颜色
							}
						}
					],
					top: '8%',
					left: 'center',
					orient: 'horizontal',
					textStyle: {
						color: '#fff',
						fontSize: 14
					},
					itemWidth: 20,
					itemHeight: 14,
					itemGap: 30
				},
				grid: {
					left: "8%",
					right: "8%",
					bottom: "8%",
					top: "20%",
					containLabel: true,
				},
				tooltip: {
					show: true,
					trigger: "axis", //axis , item
					backgroundColor: "RGBA(0, 49, 85, 1)",
					borderColor: "rgba(0, 151, 251, 1)",
					borderWidth: 1,
					borderRadius: 0,
					textStyle: {
						color: "#BCE9FC",
						fontSize: 16,
						align: "left",
					},
					},
				xAxis: {
					type: "category",
					data: this.chartData.categories,
					axisLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.3)",
						},
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: "#fff",
						fontSize: 12,
					},
				},
				yAxis: {
					name: '单位：万/m³',
					nameTextStyle: {
						color:'#fff'
					},
					type: "value",
					max: 1000,
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: "rgba(255, 255, 255, 0.1)",
							type: "dashed",
						},
					},
					axisLabel: {
						color: "#fff",
						fontSize: 12,
					},
				},
				series: [
					// 系列1 - 左侧面 (参考组件3颜色)
					{
						name: this.chartData.series1.name,
						type: "custom",
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							const barWidth = api.size([1, 0])[0] * 0.3;
							
							// 左侧面渐变色 (参考组件3)
							const leftColors = [
								{ offset: 0, color: "rgba(6, 181, 186, 0.8)" },
								{ offset: 0.5, color: "rgba(5, 150, 155, 0.5)" },
								{ offset: 1, color: "rgba(2, 89, 99, 0.2)" }
							];
							
							return {
								type: "CubeLeft",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0] - barWidth / 2,
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0]),
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, leftColors),
								},
							};
						},
						data: this.chartData.series1.data.map((value, index) => [index, value]),
					},
					// 系列1 - 右侧面 (参考组件3颜色)
					{
						name: this.chartData.series1.name,
						type: "custom",
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							const barWidth = api.size([1, 0])[0] * 0.3;
							
							// 右侧面渐变色 (参考组件3)
							const rightColors = [
								{ offset: 0, color: "rgba(8, 196, 201, 0.8)" },
								{ offset: 0.5, color: "rgba(6, 165, 170, 0.5)" },
								{ offset: 1, color: "rgba(4, 115, 128, 0.2)" }
							];
							
							return {
								type: "CubeRight",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0] - barWidth / 2,
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0]),
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, rightColors),
								},
							};
						},
						data: this.chartData.series1.data.map((value, index) => [index, value]),
					},
					// 系列1 - 顶面 (参考组件3颜色)
					{
						name: this.chartData.series1.name,
						type: "custom",
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							const barWidth = api.size([1, 0])[0] * 0.3;
							
							return {
								type: "CubeTop",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0] - barWidth / 2,
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0]),
								},
								style: {
									fill: "rgba(8, 196, 201, 0.8)",
								},
							};
						},
						data: this.chartData.series1.data.map((value, index) => [index, value]),
					},
					// 系列2 - 左侧面 (参考组件6颜色)
					{
						name: this.chartData.series2.name,
						type: "custom",
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							const barWidth = api.size([1, 0])[0] * 0.3;
							const offset = barWidth * 1.3; // 增加偏移以避免重叠
							
							// 左侧面渐变色 (参考组件6)
							const leftColors = [
								{ offset: 0, color: "rgba(9, 208, 247, 0.8)" },
								{ offset: 1, color: "rgba(17, 29, 89, 0.2)" }
							];
							
							return {
								type: "CubeLeft",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0] - barWidth / 2 + offset,
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0]),
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, leftColors),
								},
							};
						},
						data: this.chartData.series2.data.map((value, index) => [index, value]),
					},
					// 系列2 - 右侧面 (参考组件6颜色)
					{
						name: this.chartData.series2.name,
						type: "custom",
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							const barWidth = api.size([1, 0])[0] * 0.3;
							const offset = barWidth * 1.3;
							
							// 右侧面渐变色 (参考组件6)
							const rightColors = [
								{ offset: 0, color: "rgba(9, 208, 247, 0.8)" },
								{ offset: 1, color: "rgba(26, 51, 112, 0.2)" }
							];
							
							return {
								type: "CubeRight",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0] - barWidth / 2 + offset,
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0]),
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, rightColors),
								},
							};
						},
						data: this.chartData.series2.data.map((value, index) => [index, value]),
					},
					// 系列2 - 顶面 (参考组件6颜色)
					{
						name: this.chartData.series2.name,
						type: "custom",
						renderItem: (params, api) => {
							const location = api.coord([api.value(0), api.value(1)]);
							const barWidth = api.size([1, 0])[0] * 0.3;
							const offset = barWidth * 1.3;
							
							return {
								type: "CubeTop",
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0] - barWidth / 2 + offset,
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0]),
								},
								style: {
									fill: "rgba(9, 208, 247, 0.8)",
								},
							};
						},
						data: this.chartData.series2.data.map((value, index) => [index, value]),
					}
				],
			};

			myChart.setOption(option);
		},
	},
};
</script>

<style scoped lang="scss">
.echart-show {
	width: 100%;
	height: 100%;
}
</style>